<template>
  <div class="dingdan">
    <h2>订单详情</h2>
  </div>
  <div class="box1">
    <div>
      <div>
        <p>等待买家付款</p>
        <p>剩余23小时56分自动关闭</p>
      </div>

      <van-image class="wechat-img" width="3rem" height="3rem"
        src="https://img.axureshop.com/f5/db/6b/f5db6bc324b345cfb990c50c49bf7247/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u515.png" />
    </div>

  </div>
  <div class="box2">
    <div>
      <div class="wz">
        <p>张三 13261355531</p>
        <p>北京市昌平区东小口镇XXXXXXX北京市昌平区东小口镇XXXXXXX</p>
      </div>

      <van-image class="wechat-img" width="3rem" height="3rem"
        src="https://img.axureshop.com/f5/db/6b/f5db6bc324b345cfb990c50c49bf7247/images/%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u515.png" />
    </div>
  </div>
  <van-card num="2" price="2.00" desc="描述信息" title="恩康电子烟2019年新款神器充电式水果味烟油蒸汽烟辅助戒烟男女式"
    thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
    <template #tags>
      <van-tag plain type="primary">标签</van-tag>
      <van-tag plain type="primary">标签</van-tag>
    </template>
    <template #footer>
      <div>
        <p>订单总价</p>
        <span>$125</span>
      </div>
      <div>
        <p>需付款</p>
        <span>$125</span>
      </div>
      <div>
        <p>订单编号</p>
        <span>1234567891010</span>
      </div>
    </template>
  </van-card>
  <div class="btn">
  <van-button plain style="border:1px solid #BA6608;color: #BA6608;width: 140px;">取消订单</van-button>
  <van-button style="background-color: #BA6608;color: #fff;width: 140px;">付款</van-button>
</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.dingdan {
  line-height: 50px;
  text-align: center;
  box-shadow: 0 0 1px 1px gray;
}

.box1 {
  height: 140px;
  background-color: #F2F2F2;
  margin-top: 10px;

  div {
    height: 100px;
    position: relative;
    top: 10px;

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      right: 170px;
    }

    .wechat-img {
      position: absolute;
      right: 60px;
      top: 35px;

    }
  }
}

.box2 {
  height: 140px;
  background-color: #F2F2F2;
  margin-top: 10px;

  div {
    position: relative;
  }

  .wz {

    position: absolute;
    left: 80px;
    top: 50px;

  }

  .wechat-img {
    position: relative;
    top: 50px;
    left: 10px;
  }
}

.btn{
  display: flex;
  justify-content: space-around;
}
</style>